<template>
    <div class="work">
        <el-container style="  height: 1300px; border: 1px solid #eee;background: #eee;">
            <el-aside width="200px" style="background: rgba(35, 115, 214, 1); ">
                <el-menu :default-openeds="['1', '3']" :router="true">
                    <div class="lefttop"><img class="lefttopimg" src="../../assets/logo1.png" alt=""></div>

                    <el-menu-item index="/page"><i class="el-icon-s-grid"></i>语料标注</el-menu-item>
                    <el-menu-item index="/finish"><i class="el-icon-success"></i>已完成</el-menu-item>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px;height:51px;">
                    <span style="color:rgba(35, 115, 214, 1);font-size: 24px;">{{info.userId}}</span>
                    <span style="color:rgba(35, 115, 214, 1);font-size: 16px;margin-left: 30px;"
                        @click="goout">登出</span>
                </el-header>
                <!-- 路由容器 -->
                <router-view></router-view>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'Work',
        data() {
            return {
                info: ""
            };
        },
        mounted() {
            this.info = JSON.parse(localStorage.getItem("userinfo")).data,//用户id
            console.log(this.info)
        },
        methods: {
            goout() {
                localStorage.removeItem('userinfo');
                this.$router.push("/login")
            }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .el-header {
        background-color: rgb(236, 241, 247);
        color: rgb(122, 102, 102);
        line-height: 60px;
    }

    .el-aside {
        color: white;
        height: 1300px;
    }

    .el-menu-item {
        background: rgba(35, 115, 214, 1);
        color: white;
    }

    .lefttop {
        width: 200px;
        height: 60px;
        background: black;
        text-align: center;
        line-height: 60px;
        color: white;
    }

    .lefttopimg {
        width: 100%;
    }

    .page {
        overflow: hidden;
        height: 1700px;
    }

    /* 底部 */
    .textup {
        width: 235px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        color: gray;
    }

    .tet {
        line-height: 25px;
        width: 30%;
    }

    .textdown {
        width: 335px;
        height: 25px;
        margin: auto;
        display: flex;
        color: gray;
    }

    .footer {
        height: 400px;
        background: #eee;
    }
</style>